<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>木兮地板</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/index.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/saoma.css">
    <style>
        *{margin: auto;padding: auto }
        .all{
            width: 1287px;height: 1425px;
        }
        .carousel{ /* 轮播 */
            width: 100%;height: 332px;
        }
        .carousel>img{
            width: 100%;height: 332px;
        }
        .company{
            width: 1101px;height: 310px;
            text-align: center;
        }
        .qiye{
            height: 48px ;
            color: black;
            font-size: 25px;
            /* font-weight: bold; */
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .jingshen{
            width: 1101px;height: 253px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            /* border: 1px solid salmon; */
        }
        .jingshen img{
            width: 94px;
        }
        .one{
            display: flex;
            flex-direction: column;
            width: 238px;
            height: 200px;
            margin: 0;
        }
        .one>div{
            flex: 1;
        }
        .two{
            width: 238px;
            display: flex;
            flex-direction: column;
            height: 200px;
            margin: 0;
        }
        .two>div{
            flex: 1;
        }
        .three{
            width: 238px;
            display: flex;
            flex-direction: column;
            height: 200px;
            margin: 0;
        }
        .three>div{
            flex: 1;
        }
        .four{
            width: 238px;
            display: flex;
            flex-direction: column;
            height: 200px;
            margin: 0;
        }
        .four>div{
            flex: 1;
        }
        .jingshen h3{
            color: #2DAE36;
        }
        .jingshen p{
            color: #898989;
            font-size: 14px;
        }
        .show{
            width: 1101px;height: 600px;
        }
        .show-1{
            width: 1014px;height: 30px;
        }
        .show-2{
            width: 100px;height: 30px;
            background-color:#2DAE36;
            float: left;
            border-radius: 15px 0 15px 0;
        }
        .show-2 p{
            color: white;
            font-size: 18px;
            text-align: center;
        }
        .show-3{
            width: 914px;height: 30px;
            float: right;
            border-bottom: 1px solid #2DAE36;
        }
        .show-4{
            width: 1034px;height: 500px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .show-4>div{
            width: 325px;height: 247px;
            margin: 0;
        }
        .show-4 img{
            width: 325px;height: 247px;
            padding-top: 28px;
        }
    </style>
</head>
<body>
    <div class="all">
    <div id="head">
    </div>
    <!--轮播-->
    <div id="carousel-id" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-id" data-slide-to="0" class=""></li>
            <li data-target="#carousel-id" data-slide-to="1" class=""></li>
            <li data-target="#carousel-id" data-slide-to="2" class="active"></li>
        </ol>
    <div class="carousel-inner">
            <div class="item">
                <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="images/banner1.jpg">
                <div class="container">
                    <!-- <div class="carousel-caption">
                        <h1>Example headline.</h1>
                        <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                    </div> -->
                </div>
            </div>
            <div class="item">
                <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner2.jpg">
                <div class="container">
                    <!-- <div class="carousel-caption">
                        <h1>Another example headline.</h1>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                    </div> -->
                </div>
            </div>
            <div class="item active">
                <img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="images/banner3.jpg">
                <div class="container">
                    <!-- <div class="carousel-caption">
                        <h1>One more for good measure.</h1>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                    </div> -->
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <div class="company">
        <div class="qiye">
            <p>企业精神</p>
        </div> <!--企业精神-->
        <div class="jingshen">  <!--四个小方块-->
            <div class="one">
                <div>
                    <img src="images/pinpai.png" alt="品质">
                </div>
                <div>
                    <h3>品质</h3>
                </div>
                <div> 
                    <p>品质是品牌的发展基石</p>
                    <p>坚持好品质，必定铸就优质品牌</p>
                </div>
            </div>
            <div class="two">
                <div>
                    <img src="images/keji.png" alt="科技">
                </div>
                <div>
                    <h3>科技</h3>
                </div>
                <div>
                    <p>科技是品牌的助推力</p>
                    <p>只有不断科技创新，才能不会被淘汰</p>
                </div>
            </div>
            <div class="three">
                <div>
                    <img src="images/chengxin.png" alt="诚信">
                </div>
                <div>
                    <h3>诚信</h3>
                </div>
                <div>
                    <p>诚信是品牌的防护盾</p>
                    <p>诚信企业，放心品牌才能走的更长久</p>
                </div>
            </div>
            <div class="four">
                <div>
                    <img src="images/gongying.png" alt="共赢">
                </div>
                <div>
                    <h3>共赢</h3>
                </div>
                <div>
                    <p>共赢是品牌的生命力</p>
                    <p>与客户共赢，与员工共赢与企业共赢</p>
                </div>
            </div>
        </div>
    </div>
    <div class="show">
        <div class="show-1">
            <div class="show-2">
                <p>产品展示</p>
            </div>
            <div class="show-3"></div>
        </div>
        <div class="show-4">
            <div>
                <div>
                    <img src="images/item01.jpg" alt="">
                </div>
                <div>
                    <img src="images/item04.jpg" alt="">
                </div>
            </div>
            <div>
                <div>
                    <img src="images/item02.jpg" alt="">
                </div>
                <div>
                    <img src="images/item05.jpg" alt="">
                </div>
            </div>
            <div>
                <div>
                    <img src="images/item03.jpg" alt="">
                </div>
                <div>
                    <img src="images/item06.jpg" alt="">
                </div>
            </div>
        </div>
        
    </div>
    <div id="saoma"></div>
    <div id="footer"></div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>